<script setup>
import {reactive} from "vue"
import {useStore} from "vuex"

const dialogGroup = reactive({
  dialogVisible:false,
  dialogMessage:"",
})

const storeGroup = reactive({
  store:useStore(),
  async setUserInfo(){
    await this.store.dispatch("setUserInfo",{username:userGroup.username,account:userGroup.account,contact:userGroup.contact,sex:userGroup.sex,age:userGroup.age,introduce:userGroup.introduce});
    dialogGroup.dialogMessage = storeGroup.store.state.user.failCode;
    dialogGroup.dialogVisible = true;
    userGroup.change = false;
  }
})

const userGroup = reactive({
  account:storeGroup.store.state.user.userState.account,
  username: storeGroup.store.state.user.userInfo.username,
  sex: storeGroup.store.state.user.userInfo.sex,
  age:storeGroup.store.state.user.userInfo.age,
  contact: storeGroup.store.state.user.userInfo.contact,
  introduce: storeGroup.store.state.user.userInfo.introduce,
  change: false,
})
</script>

<template>
  <el-dialog
      v-model="dialogGroup.dialogVisible"
      title="Tips"
      width="30%"
  >
    <span>{{ dialogGroup.dialogMessage }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogGroup.dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <div class="info">
    <p>个人信息</p>
    <div class="info-box">
      <div class="info-user-img">
        <p>头像</p>
        <img alt="" src="http://118.178.254.102:1252/head.jpg" width="100">
      </div>
      <el-descriptions :column="4" border class="info-user-information" direction="vertical" title="">
        <el-descriptions-item label="昵称">
          <el-input v-show="userGroup.change" v-model="userGroup.username" lok/>
          <span v-show="!userGroup.change">{{ userGroup.username }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-input v-show="userGroup.change" v-model="userGroup.sex" lok/>
          <span v-show="!userGroup.change">{{ userGroup.sex }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          <el-input v-show="userGroup.change" v-model="userGroup.age" lok/>
          <span v-show="!userGroup.change">{{ userGroup.age }}</span>
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="联系方式">
          <el-input v-show="userGroup.change" v-model="userGroup.contact" lok/>
          <span v-show="!userGroup.change">{{ userGroup.contact }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="简介">
          <el-input v-show="userGroup.change" v-model="userGroup.introduce" lok/>
          <span v-show="!userGroup.change">{{ userGroup.introduce }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <div class="info-change">
        <el-button v-show="!userGroup.change" @click="userGroup.change=true">修改</el-button>
        <el-button v-show="userGroup.change" @click="storeGroup.setUserInfo()">保存</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped src="../../css/user-info.css">

</style>
